<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <%@ include file="/commons/basejs.jsp" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>位置配置</title>
</head>
    <body>
        <div class="easyui-layout" fit="true" >
            <!--center标签列表start-->
            <div data-options="region:'center',split:true,border:false" title="资源位置分类" style="width:35%;">
                <table id="special_type_dg" class="easyui-datagrid"
                       data-options="
                     fit:true,
                    rownumbers:true,
                    fitColumns:true,
                    singleSelect:true,
                    onClickRow:function(index, row){
                        doSearch();
                    }">
                    <thead>
                    <th data-options="field:'name', align:'center',width:'100%'">资源位置分类</th>
                    </thead>
                </table>
            </div>
            <!--end-->
            <!--east单项明细列表start-->
            <div data-options="region:'east',split:true,border:false" title="资源位置列表" style="width:65%;">
                <table id="loc_datagrid" class="easyui-datagrid"
                       data-options="
                            url:'${path}/specialLoc/list.do',
                            fit:true,
                            rownumbers:true,
                            toolbar:'#loc_tools',
                            pagination:true,
                            fitColumns:true,
                            singleSelect:true">
                    <thead>
                    <th data-options="field:'id', align:'center'">ID</th>
                    <th data-options="field:'name', align:'center'">位置名称</th>
                    <th data-options="field:'platform', align:'center',formatter:function(val){
                      if(val == 0){
                        return '<span>手机WAP</span>';
                      }else if(val == 1){
                        return '<span style=\'color:green\'>PC</span>';
                      }else if(val == 2){
                        return '<span style=\'color:red\'>手机APP</span>';
                      }else{
                        return val;
                      }
                   }">适应平台</th>
                    </thead>
                </table>
                <div id="loc_tools">
                    <shiro:hasPermission name="/specialLoc/add.do">
                        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="specialLocAdd();">添加</a>
                    </shiro:hasPermission>
                    <shiro:hasPermission name="/specialLoc/update.do">
                        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="specialLocUpdate();">修改</a>
                    </shiro:hasPermission>
                    <shiro:hasPermission name="/specialLoc/delete.do">
                        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="specialLocDelete();">删除</a>
                    </shiro:hasPermission>

                    <form action="#" id="searchLocForm">
                        <input name="name" class="easyui-textbox" data-options="prompt:'请输入位置名称'" style="width:200px"></input>
                        <lable>请选择平台:</lable>
                        <select id="platform" class="easyui-combobox" name="platform" data-options="editable:false,panelHeight:'auto'" style="width:100px">
                            <option value="-1" selected>--请选择平台--</option>
                            <option value="0">手机wap</option>
                            <option value="1">PC</option>
                            <option value="2">手机APP</option>
                        </select>
                        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="doSearch()">查询</a>
                    </form>
                </div>
            </div>
            <!--end-->
        </div>
        <div class="easyui-dialog" id="loc_dialog" data-options="closed:true,modal:true,width:450,height:300">
            <form id="locForm" method="post">
                <table class="grid">
                    <input name="id" type="hidden" value="">
                    <tr>
                        <td>位置名称</td>
                        <td><input name="name" type="text" placeholder="位置名称" class="easyui-validatebox" data-options="required:true" value=""></td>
                    </tr>
                    <tr>
                        <td>位置分类</td>
                        <td>
                            <select name="type" id="loc_type" class="easyui-combobox" data-options="width:140,height:29,editable:false,panelHeight:'auto'">
                                <option value="0" selected="selected">轮播图</option>
                                <option value="1" >分类</option>
                                <option value="2" >专题</option>
                                <option value="3" >商家</option>
                                <option value="4" >产品</option>
                                <option value="5" >文章</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>适应平台</td>
                        <td>
                            <select name="platform" id="loc_platform" class="easyui-combobox" data-options="width:140,height:29,editable:false,panelHeight:'auto'">
                                <option value="0" selected="selected">手机wap</option>
                                <option value="1" >PC</option>
                                <option value="2" >手机APP</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <div style="margin-top: 20px;text-align: center">
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'", onclick="save()">保存</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'", onclick="$('#loc_dialog').dialog('close')">取消</a>
                </div>
            </form>
        </div>
        <script>
            //类别
            $(function () {
                var jsonstr = '{"total":5,"rows":[{"id":"0","name":"轮播图"},{"id":"1","name":"类别"},{"id":"2","name":"专题"},{"id":"0","name":"商家"},{"id":"4","name":"产品"},{"id":"5","name":"文章"}]}';
                var data = $.parseJSON(jsonstr);
                $('#special_type_dg').datagrid('loadData', data); //将数据绑定到datagrid
            });

            var flag = "";
            function specialLocAdd(){
                $("#locForm").form("clear");
                $("#loc_type").combobox('setValue', 0);
                $("#loc_platform").combobox('setValue', 0);
                $("#loc_dialog").dialog({title: "新增位置"});
                flag = "add";
                $("#loc_dialog").dialog("open");
            }
            function specialLocUpdate(){
                var select = $("#loc_datagrid").datagrid("getSelected");
                if(select == null){
                    $.messager.alert("提示","请选择要修改的位置！","info");
                    return;
                }
                $("#locForm").form("clear");
                $("#locForm").form("load", select);
                $("#loc_dialog").dialog({title: "修改位置"});
                flag = "update";
                $("#loc_dialog").dialog("open");
            }
            function save(){
                var url = "";
                if (flag == 'add') {
                    url = '${path}/specialLoc/add.do';
                } else if (flag == 'update') {
                    url = '${path}/specialLoc/update.do';
                }
                $.messager.progress();
                $("#locForm").form("submit",{
                    url:url,
                    onSubmit:function(){
                        var valid = $(this).form("validate");
                        if (!valid) {
                            $.messager.progress("close");
                        }
                        return valid;
                    },
                    success:function(data){
                        $.messager.progress("close");
                        data=$.parseJSON(data);
                        if(data.success){
                            $("#loc_dialog").dialog("close");
                            $.messager.show({
                                title: "成功",msg: data.msg,
                                timeout:600,style:"left:30%;top:10%",
                                showType:"fade"
                            });
                            $("#loc_datagrid").datagrid("reload");
                        } else {
                            $.messager.alert(data.msg,"error");
                        }
                    },
                    error:function(data){
                        $.messager.progress("close");
                        $.messager.alert("操作失败", "服务器连接失败!","error");
                    }
                });
            }
            function specialLocDelete(){
                lananDelete("loc_datagrid", "确定要删除该位置吗?", "${path}/specialLoc/delete.do");
            }

            function doSearch(){
                var params = $("#searchLocForm").serializeArray();
                var queryParams = {};
                $.each(params, function() {
                    if (queryParams[this.name]) {
                        if (!queryParams[this.name].push) {
                            queryParams[this.name] = [ queryParams[this.name] ];
                        }
                        queryParams[this.name].push(this.value || '');
                    } else {
                        queryParams[this.name] = this.value || '';
                    }
                });

                var select = $("#special_type_dg").datagrid("getSelected");
                if (select != null) {
                    queryParams.type = select.id;
                }

                $("#loc_datagrid").datagrid('options').queryParams = queryParams;
                $("#loc_datagrid").datagrid('getPager').data("pagination").options.pageNumber = 1;
                $("#loc_datagrid").datagrid('reload');
            }
        </script>
    </body>
</html>
